// yqTmplHtmlEdit.js
// html模板编辑插件，配合自定义组件完成模型编辑
(function ($) {
    $.fn.yqTmplHtmlEdit = function (opts, param) {
        if (typeof opts == 'string') {
            return $.fn.yqTmplHtmlEdit.methods[opts](this, param);
        }

        $this = this;
        var opt;
        if ($this.data('yqtype') == 'yqTmplHtmlEdit') {
            var $uniqueID = $this.attr('ID');
            Destroy($this);
            $this = $('#' + $uniqueID);
            opt = $.extend({}, $.fn.yqTmplHtmlEdit.defaults, opts);
        } else {
            opt = $.extend({}, $.fn.yqTmplHtmlEdit.defaults, opts);
            var $uniqueID = $this.attr('ID');
            if ($uniqueID === undefined || $uniqueID === null || $uniqueID == '') {
                $uniqueID = $.getUniqueID();
                $this.attr('ID', $uniqueID);
            }
        }

        if (opt.width === undefined && $this.width() > 0) {
            opt.width = $this.width();
        }
        else if (typeof opt.width != "undefined") {
            $this.width(opt.width);
        }

        if (opt.height === undefined && $this.height() > 0) {
            opt.height = $this.height();
        }
        else if (typeof opt.height != "undefined") {
            $this.height(opt.height);
        }

        $this.data('tmllhtmledit_opt', opt);
        $this.data('yqtype', 'yqTmplHtmlEdit');

        var edit_opt = {
            width: opt.width,
            height: opt.height,
            value: opt.value
        };

        edit_opt.dragitems = titles_convert(opt.titles);
        $this.yqLayoutUI(edit_opt);
    }
    $.fn.yqTmplHtmlEdit.defaults = {
        isEdit: true, // 可编辑
        titles: [{
            "name": "code",
            "ui_title": "Code",
            "fd_type": "nvarchar",
            "length": 50,
            "decimal": 0,
            "ui_type": 2,
            "ui_width": 90,
            "ui_visible": true,
            "ui_readonly": false,
            "ui_mask": {
                "default": "默认值",
                "min": 0,
                "max": 50,
                "blank": true,
                "format": ""
            },
            group: "group1"
        }, {
            "name": "name",
            "ui_title": "Name",
            "fd_type": "nvarchar",
            "length": 50,
            "decimal": 0,
            "ui_type": 2,
            "ui_width": 90,
            "ui_visible": true,
            "ui_readonly": false,
            "ui_mask": {
                "default": "默认值",
                "min": 0,
                "max": 50,
                "blank": true,
                "format": ""
            },
            group: "group1"
        },],
        value: "",
    }
    $.fn.yqTmplHtmlEdit.methods = {
        options: function (jq) {
            return Options(jq);
        },
        // 获取文本值
        getValue: function (jq) {
            return jq.yqLayoutUI("getValue");
        },
        // 设置文本值
        setValue: function (jq, value) {
            jq.yqLayoutUI("setValue", value);
        },
        // 清空文本
        clear: function (jq) {
            jq.yqLayoutUI("clear");
        },
        // 销毁组件
        destroy: function (jq) {
            jq.yqLayoutUI("destroy");
        },
        // 设置能否编辑
        isEdit: function (jq, tf) {
            jq.yqLayoutUI("isEdit", tf);
        },
        // 调整大小
        resize: function (jq, size) {
            jq.yqLayoutUI("resize", size);
        },
    }

    function Options($object) {
        var opt = $object.data('tmllhtmledit_opt');
        return opt;
    }

    function titles_convert(titles) {
        var dragitems = [{
            title: "布局设置"
        }, {
            name: "_tb",
            title: "table",
            tag: "td",
            titles: [{
                "name": "rows",
                "ui_title": "行",
                "fd_type": "int",
                "length": 10,
                "decimal": 0,
                "ui_type": 10,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": {
                    "default": 3,
                    "min": 1,
                    "max": 50,
                    "blank": false
                }
            }, {
                "name": "cols",
                "ui_title": "列",
                "fd_type": "int",
                "length": 10,
                "decimal": 0,
                "ui_type": 10,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": {
                    "default": 3,
                    "min": 1,
                    "max": 50,
                    "blank": false
                }
            }],
            params: { rows: 2, cols: 2 },
            getValue: function () {
                var params = this.params;
                var $tb = $('<table><tbody style="vertical-align: top;"></tbody></table>');
                for (let i = 0; i < params.rows; i++) {
                    var $tr = $("<tr></tr>");
                    $tb.find("tbody").append($tr);
                    for (let j = 0; j < params.cols; j++) {
                        var $td = $("<td></td>");
                        $tr.append($td);
                    }
                }
                return $tb.prop("outerHTML");
            },
            getParams: function ($object, $inner) {
                var $tbody = $inner.children("tbody");
                var $trs;
                if ($tbody.length == 0) {
                    $trs = $inner.children();
                } else {
                    $trs = $($inner.children()[0]).children();
                }
                var cols = 1;
                for (let i = 0; i < $trs.length; i++) {
                    const $tds = $($trs[i]).children();
                    if (cols < $tds.length) {
                        cols = $tds.length;
                    }
                }

                return { rows: $trs.length, cols: cols }
            },
            update: function ($object, $inner, params) {
                // 对象解码后进行处理数据
                var a = update_GetHtml($object, $inner);
                var $o_html = $(update_GetHtml($object, $inner))
                var $tbody = $o_html.children("tbody");
                var $trs;
                if ($tbody.length == 0) {
                    $trs = $o_html.children();
                } else {
                    $trs = $($o_html.children()[0]).children();
                }
                var rows = [];
                for (let i = 0; i < $trs.length; i++) {
                    const $tds = $($trs[i]).children();
                    for (let j = 0; j < $tds.length; j++) {
                        var row = { rownum: i, colnum: j, value: $($tds[j]).html() };
                        rows.push(row);
                    }
                }

                var $tb = $('<table><tbody style="vertical-align: top;"></tbody></table>');
                for (let i = 0; i < params.rows; i++) {
                    var $tr = $("<tr></tr>");
                    $tb.find("tbody").append($tr);
                    for (let j = 0; j < params.cols; j++) {
                        var $td = $("<td></td>");
                        var $html = "";
                        for (let n = 0; n < rows.length; n++) {
                            if (rows[n].rownum == i && rows[n].colnum == j) {
                                $html = rows[n].value;
                                break;
                            }
                        }
                        $td.html($html);
                        $tr.append($td);
                    }
                }

                var newhtml = $tb.prop("outerHTML");
                update_UppEdit($object, $inner, newhtml);
            }
        }];
        for (var i = 0; i < titles.length; i++) {
            var title = titles[i];
            var dragitem = {
                id: "lbl_" + title.name,
                name: "lable",
                title: title.ui_title,
                view_add: '标题'
            };
            dragitems.push(dragitem);

            dragitem = {
                id: "txt_" + title.name,
                title: title.ui_title,
                view_add: '内容'
            };

            if (title.ui_type == 1) {   //label
                dragitem.name = "lable";
            }
            else if (title.ui_type == 2) {   //textbox
                dragitem.name = "textbox";
            }
            else if (title.ui_type == 3) {   //checkbox                   
                dragitem.name = "checkbox";
            }
            else if (title.ui_type == 4) {   //datebox
                dragitem.name = "textbox";
            }
            else if (title.ui_type == 5) {   //richbox
                dragitem.name = "textarea";
            }
            else if (title.ui_type == 6) {   //combobox
                dragitem.name = "select";
            }
            else if (title.ui_type == 7) {   //foreignkey
                dragitem.name = "textbox";
            }
            else if (title.ui_type == 8) {   //treeselect
                dragitem.name = "select";
            }
            else if (title.ui_type == 9) {   //numberbox
                dragitem.name = "textbox";
            }
            else if (title.ui_type == 10) {   //numberspinner 
                dragitem.name = "textbox";
            }
            else if (title.ui_type == 11) {   //timespinner
                dragitem.name = "textbox";
            }
            else if (title.ui_type == 12) {   //datetimebox
                dragitem.name = "textbox";
            }
            else if (title.ui_type == 15 || title.ui_type == 16) { //tbEdit 表格数据，tree数据
                dragitem.name = "dataedit";
            }
            else if (title.ui_type == 17) {  //attr属性数据
                dragitem.name = "attredit";
            }
            else if (title.ui_type == 18) {  //file文件
                dragitem.name = "textbox";
            }
            else if (title.ui_type == 19) {   //html
                dragitem.name = "dataedit";
            } 
            else if (title.ui_type == 20) {   //csv
                dragitem.name = "textbox";
            }
            else if (title.ui_type == 21) {   //func
                dragitem.name = "textbox";
            }
            else {
                dragitem.name = "textbox";
            }

            dragitems.push(dragitem);
        }

        var bases = [{
            title: "Base"
        }, {
            name: "lable",
            title: "Lable",
            getValue: function () {
                return '<lable>' + this.title + '</lable>';
            }
        }, {
            name: "textbox",
            title: "Textbox",
            titles: [{
                "name": "width",
                "ui_title": "宽度(px)",
                "fd_type": "int",
                "length": 10,
                "decimal": 0,
                "ui_type": 10,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": {
                    "default": 3,
                    "min": 30,
                    "max": 1200,
                    "blank": false
                }
            }],
            params: { width: 120 },
            getValue: function () {
                return '<input type="text" style="width:' + this.params.width + 'px;"/>';
            },
            getParams: function ($object, $inner) {
                var width = $inner.css("width")
                if (width === undefined) {
                    width = $inner.css("width");
                } else {
                    width = parseInt(width);
                }
                return { width: width }
            },
            update: function ($object, $inner, params) {
                $inner.width(params.width);
            }
        }, {
            name: "select",
            title: "Select",
            titles: [{
                "sid": "6",
                "name": "type",
                "is_func": false,
                "ui_title": "Type",
                "fd_type": "int",
                "length": 16,
                "decimal": 0,
                "ui_type": 6,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": "{\"lists\":[{\"no\":1,\"name\":\"下拉\"},{\"no\":2,\"name\":\"点选\"}]}"
            }, {
                "name": "width",
                "ui_title": "宽度(px)",
                "fd_type": "int",
                "length": 10,
                "decimal": 0,
                "ui_type": 10,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": {
                    "default": 3,
                    "min": 30,
                    "max": 1200,
                    "blank": false
                }
            }],
            params: { type: 1, width: 120 },
            getValue: function () {
                if (this.params.type == 1) {
                    return '<select style="width: ' + this.params.width + 'px"></select>';
                } else {
                    return '<div style="width: ' + this.params.width + 'px">[' + this.title + ']</div>';
                }
            },
            getParams: function ($object, $inner) {
                var width = $inner.css("width")
                if (width === undefined) {
                    width = $inner.css("width");
                } else {
                    width = parseInt(width);
                }

                var params = { width: width };
                if ($inner[0].tagName.toLowerCase() == "select") {
                    params.type = 1;
                } else {
                    params.type = 2;
                }

                return params
            },
            update: function ($object, $inner, params) {
                var newhtml;
                if (params.type == 1) {
                    newhtml = '<select style="width: ' + params.width + 'px"></select>';
                } else {
                    newhtml = '<div style="width: ' + params.width + 'px">[' + this.title + ']</div>';
                }
                update_UppEdit($object, $inner, newhtml);
            }
        }, {
            name: "checkbox",
            title: "Checkbox",
            getValue: function () {
                return '<input type="checkbox" />';
            }
        }, {
            name: "textarea",
            title: "Textarea",
            titles: [{
                "name": "width",
                "ui_title": "宽度(px)",
                "fd_type": "int",
                "length": 10,
                "decimal": 0,
                "ui_type": 10,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": {
                    "default": 3,
                    "min": 30,
                    "max": 1200,
                    "blank": false
                }
            }, {
                "name": "height",
                "ui_title": "高度(px)",
                "fd_type": "int",
                "length": 10,
                "decimal": 0,
                "ui_type": 10,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": {
                    "default": 3,
                    "min": 30,
                    "max": 1200,
                    "blank": false
                }
            }],
            params: { width: 200, height: 50 },
            getValue: function () {
                return '<textarea  style="height: ' + this.params.height + 'px; width: ' + this.params.width + 'px"></textarea>';
            },
            getParams: function ($object, $inner) {
                var width = $inner.css("width");
                var height = $inner.css("height");
                return { width: width, height: height }
            },
            update: function ($object, $inner, params) {
                $inner.width(params.width);
                $inner.height(params.height);
            }
        }, {
            name: "attredit",
            title: "Attredit",
            titles: [{
                "sid": "6",
                "name": "type",
                "is_func": false,
                "ui_title": "Type",
                "fd_type": "int",
                "length": 16,
                "decimal": 0,
                "ui_type": 6,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": "{\"lists\":[{\"no\":1,\"name\":\"弹出模式\"},{\"no\":2,\"name\":\"当前面板\"}]}"
            }, {
                "sid": "6",
                "name": "editType",
                "is_func": false,
                "ui_title": "EditType",
                "fd_type": "int",
                "length": 16,
                "decimal": 0,
                "ui_type": 6,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": { "default": 1, "lists": [{ "no": 1, "name": "属性模式" }, { "no": 2, "name": "表单模式" }] }
            }, {
                "name": "modelNo",
                "ui_title": "ModelNo",
                "fd_type": "int",
                "length": 10,
                "decimal": 0,
                "ui_type": 10,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": {
                    "default": 1,
                    "min": -1,
                    "max": 99999,
                    "blank": false
                }
            }, {
                "name": "width",
                "ui_title": "宽度(px)",
                "fd_type": "int",
                "length": 10,
                "decimal": 0,
                "ui_type": 10,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": {
                    "default": 3,
                    "min": 30,
                    "max": 1200,
                    "blank": false
                }
            }, {
                "name": "height",
                "ui_title": "高度(px)",
                "fd_type": "int",
                "length": 10,
                "decimal": 0,
                "ui_type": 10,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": {
                    "default": 3,
                    "min": 30,
                    "max": 1200,
                    "blank": false
                }
            }],
            params: { type: 1, width: 120 },
            getValue: function () {
                if (this.params.type == 1) {
                    return '<input type="text" style="width:' + this.params.width + 'px;"/>';
                } else {
                    if (!(this.params.editType == 1 || this.params.editType == 2)) {
                        this.params.editType = 1;
                    }
                    if (this.params.modelNo == undefined) {
                        this.params.modelNo = 1;
                    }
                    return '<div edittype="' + this.params.editType + '" modelno="' + this.params.modelNo + '" style="width:' + this.params.width + 'px;height:' + this.params.height + 'px;">[' + this.title + ']</div>';
                }
            },
            getParams: function ($object, $inner) {
                var width = $inner.css("width")
                if (!(width === undefined)) {
                    width = parseInt(width);
                } else {
                    width = 150;
                }

                var params = { width: width, editType: 1, modelNo: -1 };
                if ($inner[0].tagName.toLowerCase() == "input") {
                    params.type = 1;
                } else {
                    params.type = 2;
                }

                if (params.type == 2) {
                    var height = $inner.css("height")
                    if (!(height === undefined)) {
                        height = parseInt(height);
                    } else {
                        height = 50;
                    }
                    params.height = height;

                    if (!($inner.attr("edittype") === undefined)) {
                        params.editType = parseInt($inner.attr("edittype"));
                    }
                    if (!($inner.attr("modelno") === undefined)) {
                        params.modelNo = parseInt($inner.attr("modelno"));
                    }
                }

                return params
            },
            update: function ($object, $inner, params) {
                var newhtml;
                if (params.type == 1) {
                    newhtml = '<select style="width: ' + params.width + 'px"></select>';
                } else {
                    newhtml = '<div edittype="' + params.editType + '" modelno="' + params.modelNo + '" style="width:' + params.width + 'px;height:' + params.height + 'px;">[' + this.title + ']</div>';
                }
                update_UppEdit($object, $inner, newhtml);
            }
        }, {
            name: "dataedit",
            title: "Dataedit",
            titles: [{
                "sid": "6",
                "name": "type",
                "is_func": false,
                "ui_title": "Type",
                "fd_type": "int",
                "length": 16,
                "decimal": 0,
                "ui_type": 6,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": "{\"lists\":[{\"no\":1,\"name\":\"弹出模式\"},{\"no\":2,\"name\":\"当前面板\"}]}"
            }, {
                "name": "width",
                "ui_title": "宽度(px)",
                "fd_type": "int",
                "length": 10,
                "decimal": 0,
                "ui_type": 10,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": {
                    "default": 3,
                    "min": 30,
                    "max": 1200,
                    "blank": false
                }
            }, {
                "name": "height",
                "ui_title": "高度(px)",
                "fd_type": "int",
                "length": 10,
                "decimal": 0,
                "ui_type": 10,
                "ui_width": 90,
                "ui_visible": true,
                "ui_readnnly": false,
                "ui_mask": {
                    "default": 3,
                    "min": 30,
                    "max": 1200,
                    "blank": false
                }
            }],
            params: { type: 1, width: 120 },
            getValue: function () {
                if (this.params.type == 1) {
                    return '<input type="text" style="width:' + this.params.width + 'px;"/>';
                } else {
                    return '<div style="width:' + this.params.width + 'px;height:' + this.params.height + 'px;">[' + this.title + ']</div>';
                }
            },
            getParams: function ($object, $inner) {
                var width = $inner.css("width")
                if (!(width === undefined)) {
                    width = parseInt(width);
                } else {
                    width = 150;
                }

                var params = { width: width };
                if ($inner[0].tagName.toLowerCase() == "input") {
                    params.type = 1;
                } else {
                    params.type = 2;
                }

                if (params.type == 2) {
                    var height = $inner.css("height")
                    if (!(height === undefined)) {
                        height = parseInt(height);
                    } else {
                        height = 50;
                    }
                    params.height = height;
                }

                return params
            },
            update: function ($object, $inner, params) {
                var newhtml;
                if (params.type == 1) {
                    newhtml = '<select style="width: ' + params.width + 'px"></select>';
                } else {
                    newhtml = '<div style="width:' + params.width + 'px;height:' + params.height + 'px;">[' + this.title + ']</div>';
                }
                update_UppEdit($object, $inner, newhtml);
            }
        }];

        for (let i = 0; i < bases.length; i++) {
            dragitems.push(bases[i]);
        }

        return dragitems;
    }

    function update_GetHtml($object, $inner) {
        return $object.yqLayoutUI('update_GetHtml', $inner);
    }

    function update_UppEdit($object, $inner, f_html) {
        $object.yqLayoutUI('update_UppEdit', {
            $inner: $inner,
            f_html: f_html
        });
    }
})(jQuery);